How to Create an Online Chatbot in PHP MySQL

Blog Jul 17, 2024 0 76 Add to Reading List

Table of Contents

Getting Started on How to Create an Online Chatbot in PHP MySQL

This is a tutorial when we are able to create on How to Create an Online Chatbot in PHP MySQL.

In this tutorial, there is a chat form on the web page with an input field and a button labeled as “send” for typing a message and send to the bot. When you ask something to the bot, and that query exists in the database, the bot will instantly reply to your query. Still, if your question not matched the database queries, then the bot replays a message labeled as “Sorry, can’t be able to understand you!”. In this chatting process, the webpage isn’t reloaded because I used jQuery (Ajax).

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program.

First, Create a Database named “bot“, table name “chatbot“, and inside this table, you have to create three rows (id, queries, replies). Otherwise, you can replace the name of the database, table, and table rows with your database table details in my given files. See image below on How to Create an Online Chatbot in PHP MySQL Database.

id type int(11) auto_increment
queries type varchar(300)
replies type varchar(300)

bot.php

<!DOCTYPE html>

<head>

</head>

<body>

<div class="title">Simple Online Chatbot</div>

</div>

<p>Hello there, how can I help you?</p>

</div>

</div>

$(document).ready(function(){

$("#send-btn").on("click", function(){

$value = $("#data").val();

$msg = '

'+ $value +'

$(".form").append($msg);

$("#data").val('');

// start ajax code

$.ajax({

url: 'message.php',

type: 'POST',

data: 'text='+$value,

success: function(result){

$replay = '

'+ result +'

$(".form").append($replay);

// when chat goes down the scroll bar automatically comes to the bottom

$(".form").scrollTop($(".form")[0].scrollHeight);

}

});

</script>

</body>

</html>

message.php

<?php

// connecting to database

$conn = mysqli_connect("localhost", "root", "", "bot") or die("Database Error");

// getting user message through ajax

$getMesg = mysqli_real_escape_string($conn, $_POST['text']);

//checking user query to database query

$check_data = "SELECT replies FROM chatbot WHERE queries LIKE '%$getMesg%'";

$run_query = mysqli_query($conn, $check_data) or die("Error");

// if user query matched to database query we'll show the reply otherwise it go to else statement

if(mysqli_num_rows($run_query) > 0){

//fetching replay from the database according to the user query

$fetch_data = mysqli_fetch_assoc($run_query);

//storing replay to a varible which we'll send to ajax

$replay = $fetch_data['replies'];

echo $replay;

}else{

echo "Sorry can't be able to understand you!";

}

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

html,body{

display: grid;

height: 100%;

place-items: center;

}

::selection{

color: #fff;

background: #007bff;

}

::-webkit-scrollbar{

width: 3px;

border-radius: 25px;

}

::-webkit-scrollbar-track{

background: #f1f1f1;

}

::-webkit-scrollbar-thumb{

background: #ddd;

}

::-webkit-scrollbar-thumb:hover{

background: #ccc;

}

.wrapper{

width: 370px;

background: #fff;

border-radius: 5px;

border: 1px solid lightgrey;

border-top: 0px;

}

.wrapper .title{

background: #007bff;

color: #fff;

font-size: 20px;

font-weight: 500;

line-height: 60px;

text-align: center;

border-bottom: 1px solid #006fe6;

border-radius: 5px 5px 0 0;

}

.wrapper .form{

padding: 20px 15px;

min-height: 400px;

max-height: 400px;

overflow-y: auto;

}

.wrapper .form .inbox{

width: 100%;

display: flex;

align-items: baseline;

}

.wrapper .form .user-inbox{

justify-content: flex-end;

margin: 13px 0;

}

.wrapper .form .inbox .icon{

height: 40px;

width: 40px;

color: #fff;

text-align: center;

line-height: 40px;

border-radius: 50%;

font-size: 18px;

background: #007bff;

}

.wrapper .form .inbox .msg-header{

max-width: 53%;

margin-left: 10px;

}

.form .inbox .msg-header p{

color: #fff;

background: #007bff;

border-radius: 10px;

padding: 8px 10px;

font-size: 14px;

word-break: break-all;

}

.form .user-inbox .msg-header p{

color: #333;

background: #efefef;

}

.wrapper .typing-field{

display: flex;

height: 60px;

width: 100%;

align-items: center;

justify-content: space-evenly;

background: #efefef;

border-top: 1px solid #d9d9d9;

border-radius: 0 0 5px 5px;

}

.wrapper .typing-field .input-data{

height: 40px;

width: 335px;

position: relative;

}

.wrapper .typing-field .input-data input{

height: 100%;

width: 100%;

outline: none;

border: 1px solid transparent;

padding: 0 80px 0 15px;

border-radius: 3px;

font-size: 15px;

background: #fff;

transition: all 0.3s ease;

}

.typing-field .input-data input:focus{

border-color: rgba(0,123,255,0.8);

}

.input-data input::placeholder{

color: #999999;

transition: all 0.3s ease;

}

.input-data input:focus::placeholder{

color: #bfbfbf;

}

.wrapper .typing-field .input-data button{

position: absolute;

right: 5px;

top: 50%;

height: 30px;

width: 65px;

color: #fff;

font-size: 16px;

cursor: pointer;

outline: none;

opacity: 0;

pointer-events: none;

border-radius: 3px;

background: #007bff;

border: 1px solid #007bff;

transform: translateY(-50%);

transition: all 0.3s ease;

}

.wrapper .typing-field .input-data input:valid ~ button{

opacity: 1;

pointer-events: auto;

}

.typing-field .input-data button:hover{

background: #006fef;

}

DEMO

What's Your Reaction?

Dislike

Love

Funny

Angry

Sad

Wow

How to Create an Online Chatbot in PHP MySQL